import { BasicColumn, FormSchema } from "/@/components/Table"
import { readonly, ref, h } from "vue"
import { render } from "/@/utils/common/renderUtils"
import { DescItem } from "/@/components/Description/index"
import { listMchQrcodeTemplate } from "/@/api/pay"
import { useI18n } from "/@/hooks/web/useI18n"
const { t } = useI18n("")
export const fixedFlagOptions = ref<any[]>([
  { label: "任意金额", value: '0' },
  { label: "固定金额", value: '1' },
])
export const columns: BasicColumn[] = [
  {
    title: t("二维码"),
    dataIndex: "id",
    slot: "id",
    width: 160,
  },
  {
    title: t("批次号"),
    dataIndex: "batchNo",
    width: 120,
  },
  {
    title: t("绑定商户状态"),
    dataIndex: "bindMchStatus",
    customRender: ({ text, record }) => {
      return render.renderTag(text ? "已绑定" : "未绑定", text ? "green" : "red")
    },
    width: 120,
  },
  {
    title: t("支付金额"),
    dataIndex: "fixedPayAmount",
    customRender: ({ text, record }) => {
      // @ts-ignore
      return record?.fixedFlag === '0' ? '任意金额' : `${text} 元`
    },
    width: 120,
  },
  {
    title: t("扫码页面"),
    dataIndex: "entryPage",
    customRender: ({ text }) => {
      return render.renderDict(text, "scanMchQrcodeEntryPage")
    },
    width: 100,
  },
  {
    title: "状态",
    dataIndex: "qrcStatus",
    customRender: ({ text }) => {
      let color = "green"
      if (text === "2") {
        color = "red"
      }
      return render.renderTag(render.renderDict(text, "data_use_status"), color)
    },
    width: 60,
  },
  {
    title: t("创建时间"),
    dataIndex: "createdAt",
    width: 160,
  },
  {
    title: t("创建者"),
    dataIndex: "createdBy",
    width: 130,
  },
]

export const searchFormSchema: FormSchema[] = [
  {
    label: t("批次号"),
    field: "batchNo",
    component: "Input",
  },
  {
    label: t("商户号"),
    field: "mchNo",
    component: "Input",
  },
  {
    label: t("码牌ID"),
    field: "qrcodeId",
    component: "Input",
  },
]

export const bindFormSchema: FormSchema[] = [
  {
    label: "",
    field: "id",
    component: "Input",
    show: false,
  },
  {
    label: t("绑定状态"),
    field: "bindMchStatus",
    slot: "bindMchStatus",
    component: "Input",
  },
  {
    label: t("商户号"),
    field: "mchNo",
    ifShow: ({ values }) => values.bindMchStatus || values.mchNo,
    component: "Input",
    componentProps: {
      readonly: true,
      bordered: false,
    },
  },
  {
    label: t("商户应用"),
    field: "appId",
    ifShow: ({ values }) => values.bindMchStatus || values.appId,
    component: "Input",
    componentProps: {
      readonly: true,
      bordered: false,
    },
  },
]

export const inputFormSchemas: FormSchema[] = [
  {
    label: "",
    field: "id",
    component: "Input",
    show: false,
  },
  {
    label: t("批次号"),
    required: true,
    field: "batchNo",
    slot: "batchNo",
    component: "Input",
    ifShow: ({ values }) => !values.id,
    helpMessage: "数字格式，建议采用： YYMMDD+次数表示",
    componentProps: {
      maxlength: 32,
    },
  },
  {
    label: t("创建数量"),
    required: true,
    field: "createNumber",
    defaultValue: 1,
    ifShow: ({ values }) => !values.id,
    component: "InputNumber",
    componentProps: {
      min: 1,
      max: 20,
    },
  },
  {
    label: t("二维码模板"),
    required: true,
    field: "templateId",
    component: "ApiSelect",
    componentProps: {
      api: listMchQrcodeTemplate,
      optionFilterProp: "label",
      showSearch: true,
      labelField: "name",
      valueField: "id",
      dropdownStyle: { maxHeight: "600vh", overflow: "auto" },
    },
  },
  {
    label: t("二维码金额"),
    required: false,
    field: "fixedFlag",
    defaultValue: "1",
    slot: "fixedFlag",
    component: "Input",
  },
  {
    label: t("固定支付金额"),
    show: false,
    field: "fixedPayAmount",
    component: "Input",
  },
  {
    label: t("扫码后页面类型"),
    required: false,
    field: "entryPage",
    defaultValue: "h5",
    ifShow: ({ values }) => !values.id,
    component: "JDictSelectTag",
  },

  {
    label: t("二维码地址"),
    required: false,
    field: "urlPlaceholder",
    ifShow: ({ values }) => !values.id,
    helpMessage: [
      `若要使用小程序，请将该链接配置到微信小程序后台[开发管理-开发设置] 中的扫普通链接二维码打开小程序。
       若要配置到多个小程序需点击[修改]填写不同的占位符。`
    ],
    component: "Input",
    slot: "urlPlaceholder",
  },

  {
    label: t("二维码地址前缀"),
    show: false,
    field: "qrcodePrefix",
    component: "Input",
  },
  {
    label: t("二维码地址后缀"),
    show: false,
    field: "qrcodeSuffix",
    component: "Input",
  },

  {
    label: t("状态"),
    field: "qrcStatus",
    defaultValue: "1",
    component: "JDictSelectTag",
    componentProps: {
      type: "radio",
      dictType: "data_use_status",
    },
  },
  {
    label: t("备注"),
    field: "remark",
    required: false,
    component: "InputTextArea",
    componentProps: {
      maxlength: 500,
    },
    colProps: { lg: 24, md: 24 },
  },
]

export const formDetailSchema: DescItem[] = [
  {
    label: t("批次号"),
    field: "batchNo",
  },
  {
    label: t("绑定商户"),
    field: "bindMchStatus",
    render: (curVal, data) => {
      if (curVal) {
        return h("div", {}, [h("div", {}, [`商户: ${data.mchNo}（${data.mchName}）`]), h("div", {}, [`应用: ${data.appId}（${data.appName}）`])])
      }
      return render.renderTag("未绑定", "red")
    },
  },
  {
    label: t("代理商编号"),
    field: "agentNo",
  },
  {
    label: t("支付金额"),
    field: "fixedPayAmount",
    render: (curVal, data) => {
      return data?.fixedFlag === "0" ? '任意金额' : `${curVal} 元`
    },
  },
  {
    label: t("扫码页面类型"),
    field: "entryPage",
    render: (curVal, data) => {
      return render.renderDict(curVal, "scanMchQrcodeEntryPage")
    },
  },
  {
    label: t("二维码地址"),
    field: "qrcodeUrl",
  },
  {
    label: t("二维码模板"),
    field: "templateName",
  },
  {
    label: t("二维码状态"),
    field: "qrcStatus",
    render: (curVal, data) => {
      let color = "red"
      if (curVal === "1") {
        color = "green"
      }
      return render.renderTag(render.renderDict(curVal, "data_use_status"), color)
    },
  },
  {
    label: t("创建时间"),
    field: "createdAt",
  },
  {
    label: t("更新时间"),
    field: "updatedAt",
  },
  {
    label: t("创建者"),
    field: "createdBy",
  },
  {
    label: t("更新者"),
    field: "updatedBy",
  },
  {
    label: t("备注"),
    labelMinWidth: 40,
    field: "remark",
  },
]
